/*-------------------------------------

highcharts.render.js

** example **

-html
<table class="hcTable" summary="this table summary" data-values="values text" data-format='format' data-type="line">
    <thead>
        <tr>
            <th>name</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>oh</th>
            <td>1äşş</td>
            <td>2äşş</td>
            <td>3äşş</td>
            <td>4äşş</td>
            <td>5äşş</td>
        </tr>
        <tr>
            <th>ah</th>
            <td>6äşş</td>
            <td>7äşş</td>
            <td>8äşş</td>
            <td>9äşş</td>
            <td>10äşş</td>
        </tr>
        <tr>
            <th>cmon</th>
            <td>11äşş</td>
            <td>12äşş</td>
            <td>13äşş</td>
            <td>14äşş</td>
            <td>15äşş</td>
        </tr>
    </tbody>
</table>

-js
$('.hcTable').hcrender();

--------------------------------------*/

(function( $ ){
	$.fn.hcrender = function( options ) {

		var op = $.extend({
			container		:""
		},options);

		return this.each(function() {

			var self = this;
				self.type       = ($(self).data('type')) ? $(self).data('type') : "line";
				self.height     = ($(self).data('height')) ? $(self).data('height') : 500;
				self.title		= $(self).attr('summary');
				self.values		= $(self).data('values');
				self.format		= $(self).data('format');
				self.conId		= "hcContainer" + Math.floor( Math.random() * 99999 );
				self.categories = [];
				self.series     = [];

			var methods = {
				setup:function(){
					if(op.container == ""){
						$(self).after('<div id="' + self.conId + '" style="height:' + self.height + 'px"></div>');
					}else {
						$(op.container).attr('id',self.conId).height(self.height);
					}
					if(self.type != "pie"){
						$("thead th" , self).each(function(i){
							if(i == 0){return;}
							self.categories.push($(this).text());
						});
						$("tbody tr" , self).each(function(){
							var tempHash = {};
							var tempArray = [];
							tempHash["name"] = $("th" , this).text();
							$("td" , this).each(function(){
								tempArray.push(methods.getNumber($(this).text()));
							});
							tempHash["data"] = tempArray;
							self.series.push(tempHash);
						});
						methods.render();
					}else {
						$("tbody tr td" , self).each(function(i){
							var tempArray = [];
							tempArray.push($("thead tr th:eq(" + i + ")" , self).text());
							tempArray.push(methods.getNumber($(this).text()));
							self.series.push(tempArray);
						});
						// $("tbody tr" , self).each(function(){
						// 	var tempArray = [];
						// 	$(" > *" , this).each(function(i){
						// 		if(i == 0){
						// 			tempArray.push($(this).text());
						// 		}else {
						// 			tempArray.push(methods.getNumber($(this).text()));
						// 		}
						// 	});
						// 	self.series.push(tempArray);
						// });
						methods.renderPie();
					}
				},
				render:function(){
					var chart = new Highcharts.Chart({
			            chart: {
			                renderTo: self.conId,
			                type: self.type,
			                marginRight: 130,
			                marginBottom: 25
			            },
			            title: {
			                text: self.title,
			                x: -20 //center
			            },
			            xAxis: {
			                categories:self.categories
			            },
			            yAxis: {
			                title: {
			                    text: self.values
			                },
			                plotLines: [{
			                    value: 0,
			                    width: 1,
			                    color: '#808080'
			                }]
			            },
			            tooltip: {
			                formatter: function() {
			                        return '<b>'+ this.series.name +'</b><br/>'+
			                        this.x +': '+ this.y + self.format;
			                }
			            },
			            legend: {
			                layout: 'vertical',
			                align: 'right',
			                verticalAlign: 'top',
			                x: -10,
			                y: 100,
			                borderWidth: 0
			            },
			            series:self.series
			        });
				},
				renderPie : function(){
					var chart = new Highcharts.Chart({
			            chart: {
			                renderTo: self.conId,
			                plotBackgroundColor: null,
			                plotBorderWidth: null,
			                plotShadow: false
			            },
			            title: {
			                text: self.title,
			            },
			            tooltip: {
			        	    pointFormat: '{series.name}: <b>{point.percentage}%</b>',
			            	percentageDecimals: 1
			            },
			            plotOptions: {
			                pie: {
			                    allowPointSelect: true,
			                    cursor: 'pointer',
			                    dataLabels: {
			                        enabled: true,
			                        color: '#000000',
			                        connectorColor: '#000000',
			                        formatter: function() {
			                            return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage*10)/10 +' %';
			                        }
			                    }
			                }
			            },
			            series: [{
			                type: 'pie',
			                name: self.values,
			                data: self.series
			            }]
			        });
				},
				getNumber:function(str){
					var strMatch = str.match(/[0-9]/g);
					var rtnMatch = "";
					try{
						for (i=0; i < strMatch.length; i++){
							rtnMatch = rtnMatch + strMatch[i];
						}
					} catch (e) {}
					return Number(rtnMatch);
				}
			}
			methods.setup();
		});

	};
})( jQuery );